<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col">
      <div class="d-flex">
        <div class="d-flex me-auto">
          <input type="text" class="form-control me-2" id="name" placeholder="movies ...">
          <button type="button" class="btn nga-btn-boxoffice-primary btn-sm nga-btn-boxoffice"><i
              class="fa fa-search"></i></button>
        </div>
        <div class="d-flex me-auto d-none d-md-block">
          <div class="pt-2 ml-4">
            <b>
              <span style="color:gray;">7 Movies</span>
            </b>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row justify-content-center nga-container">
    <div class="table-responsive pt-4">
      <table class="table table-hover table-striped table-bordered table-sm">
        <thead>
          <tr>
            <th style="cursor: pointer"
              class="text-info font-weight-bold text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              Rank<i class="ms-1 fas fa-arrows-alt-v filterEnabled"></i></th>
            <th class="text-center text-danger">Trailer</th>
            <th style="cursor: pointer" class="text-primary font-weight-bold text-center">Name<i
                class="ms-1 fas fa-long-arrow-alt-up filterEnabled"></i></th>
            <th
              class="text-success font-weight-bold text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              Wiki</th>
            <th style="cursor: pointer" class="font-weight-bold text-center">Date<i
                class="ms-1 fas fas fa-arrows-alt-v filterEnabled"></i></th>
            <th style="cursor: pointer" class="text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              Worldwide<i class="ms-1 fas fa-long-arrow-alt-up"></i>
            </th>
            <th style="cursor: pointer" class="text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              International<i class="ms-1 fas fa-arrows-alt-v filterEnabled"></i></th>
            <th style="cursor: pointer" class="text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              Domestic<i class="ms-1 fas fa-arrows-alt-v filterEnabled"></i></th>
            <th style="cursor: pointer" class="text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              Budget<i class="ms-1 fas fas fa-arrows-alt-v filterEnabled"></i></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of items; let i=index;">
            <td class="text-info text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell" tabindex="1">
              <a style="cursor: pointer" (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)"
                tabindex="1">{{ i
                +
                1 }}</a>
            </td>
            <td class="text-center text-danger">
              <a style="cursor: pointer" (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)"
                tabindex="1"><i class="fab fa-youtube"></i></a>
            </td>
            <td class="text-primary font-weight-bold text-center">
              <a style="cursor: pointer" style="cursor: pointer" (click)="onSelectItemTrailer(item)"
                (keydown)="onSelectItemTrailer(item)" tabindex="1">{{ item.name
                }}</a>
            </td>
            <td class="font-weight-bold text-center d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              <a style="cursor: pointer" href="https://en.wikipedia.org/wiki/{{ item.wikipediaLink }}"><i
                  class="fab fa-wikipedia-w text-success fw-bold"></i></a>
            </td>
            <td class="font-weight-bold text-center">
              <a (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)" tabindex="1">{{
                item.releaseDate }}</a>
            </td>
            <td class="text-end d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              <a (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)" tabindex="1">$ {{
                item.worldwide | number
                }} </a>

            </td>
            <td class="text-end d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              <a (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)" tabindex="1">$ {{
                item.international | number }} </a>
            </td>
            <td class="text-end d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              <a (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)" tabindex="1">$ {{
                item.domestic | number }} </a>
            </td>
            <td class="text-end d-none d-md-table-cell d-lg-table-cell d-xl-table-cell">
              <a (click)="onSelectItemTrailer(item)" (keydown)="onSelectItemTrailer(item)" tabindex="1">$ {{ item.budget
                | number }} </a>
            </td>
          </tr>
        </tbody>
      </table>
      <nav aria-label="pagination">
        <ul class="pagination pagination-sm justify-content-center">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&lsaquo;</span>
            </a>
          </li>
          <li class="page-item active"><a class="page-link" href="#">2</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&rsaquo;</span>
            </a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <section>
    <div class="modal fade" id="exampleModal" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header clearfix d-block d-sm-none d-flex justify-content-center">
            <button type="button" class="btn btn-sm btn-outline-primary btn-rounded btn-md ml-4"
              data-bs-dismiss="modal">
              <strong>Close</strong>
            </button>
          </div>
          <div class="modal-body">
            <div *ngIf="playerLoaded" class="nga-embed nga-embed-youtube nga-z-depth">
              <iframe class="nga-embed-item" [src]="('https://www.youtube.com/embed/' + player ) | safe"
                allowfullscreen></iframe>
            </div>
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button"
              class="clearfix d-none d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block btn btn-outline-primary btn-sm btn-rounded btn-md"
              data-bs-dismiss="modal"><strong>Close</strong></button>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>